<template>
  <div class="app-container">
    <el-row :gutter="30">
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20" style="width: 1020px">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input
              v-model="query.blurry"
              clearable
              size="small"
              placeholder="输入户主姓名进行搜索"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
            <el-date-picker
              v-model="query.startTime"
              :default-time="['00:00:00','23:59:59']"
              type="daterange"
              range-separator=":"
              size="small"
              class="date-item"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <rrOperation :crud="crud" />
          </div>
          <crudOperation show="" :permission="permission" />
        </div>
        <!--表单渲染-->
        <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="isShowEditView" title="信息详情" width="800px">
          <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
            <el-form-item label="户内编号" prop="code">
              {{ form.code}}
            </el-form-item>
            <el-form-item label="户主姓名" prop="name">
              {{form.name}}
            </el-form-item>
            <el-form-item label="身份证号" prop="card">
              {{form.card}}
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              {{form.sex === 1 ? '女' : '男'}}
            </el-form-item>
            <el-form-item label="民族" prop="nationid">
              {{nation_name}}
            </el-form-item>
            <el-form-item label="健康状态" prop="heath">
              {{form.heath === 0 ? '健康' : form.heath === 1 ? '正常' : '良好'}}
            </el-form-item>
            <el-form-item label="文化程度" prop="culture">
              {{form.culture}}
            </el-form-item>
            <el-form-item label="人员属性" prop="attr">
              {{form.attr}}
            </el-form-item>
            <el-form-item label="是否农业户口" prop="isfarm">
              {{form.isfarm === 1 ? '是' : '否'}}
            </el-form-item>
            <el-form-item label="婚姻情况" prop="wedding">
              {{form.wedding === 0 ? '未婚' : '已婚'}}
            </el-form-item>
            <el-form-item label="岗位" prop="position">
              {{position_name}}
            </el-form-item>
            <el-form-item label="电话号码" prop="telephone">
              {{form.telephone}}
            </el-form-item>
            <el-form-item label="农合证号" prop="farmid">
              {{form.farmid}}
            </el-form-item>
            <el-form-item label="是否农村户口" prop="iscountry">
              {{form.iscountry === 1 ? '是' : '否'}}
            </el-form-item>
            <el-form-item label="工作单位" prop="work">
              {{form.work}}
            </el-form-item>
            <el-form-item label="慢性病" prop="sortid">
              {{csort_name}}
            </el-form-item>
            <el-form-item label="所属行政区域" prop="j_areaid">
              {{j_area_name}}
            </el-form-item>
            <el-form-item label="慢性病开始时间" prop="starttime">
              {{form.starttime}}
            </el-form-item>
            <el-form-item label="慢性病结束时间" prop="endtime">
              {{form.endtime}}
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="isShowEditView = false">取消</el-button>
            <el-button :loading="crud.cu === 2" type="primary" @click="isShowEditView = false">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%"  @selection-change="crud.selectionChangeHandler">
          <el-table-column :selectable="checkboxT" type="selection" width="60" />
          <el-table-column v-if="columns.visible('code')" :show-overflow-tooltip="true" prop="code" label="户内编号" />
          <el-table-column v-if="columns.visible('name')" :show-overflow-tooltip="true" prop="name" label="户主姓名" />
          <el-table-column v-if="columns.visible('card')" :show-overflow-tooltip="true" prop="card" label="身份证号" width="160"/>
          <el-table-column v-if="columns.visible('sex')" :show-overflow-tooltip="true" prop="sex" label="性别" :formatter="formatSex"/>
          <el-table-column v-if="columns.visible('nationid')" :show-overflow-tooltip="true" prop="nation.name" label="民族" />
          <el-table-column v-if="columns.visible('heath')" :show-overflow-tooltip="true" prop="heath" label="健康状态" :formatter="formatHeath" />
          <el-table-column v-if="columns.visible('culture')" :show-overflow-tooltip="true" prop="culture" label="文化程度" />
          <el-table-column v-if="columns.visible('attr')" :show-overflow-tooltip="true" prop="attr" label="人员属性" />
          <el-table-column v-if="columns.visible('isfarm')" :show-overflow-tooltip="true" prop="isfarm" label="是否农业户口" width="120" :formatter="formatIsfarm" align="center"/>
          <el-table-column v-if="columns.visible('wedding')" :show-overflow-tooltip="true" prop="wedding" label="婚姻情况" :formatter="formatWedding"/>
          <el-table-column v-if="columns.visible('positionid')" :show-overflow-tooltip="true" prop="position.name" label="岗位" width="120" />
          <el-table-column v-if="columns.visible('telephone')" :show-overflow-tooltip="true" prop="telephone" label="电话号码" width="160" />
          <el-table-column v-if="columns.visible('farmid')" :show-overflow-tooltip="true" prop="farmid" label="农合证号" />
          <el-table-column v-if="columns.visible('iscountry')" :show-overflow-tooltip="true" prop="iscountry" label="是否农村户口" width="120" :formatter="formatIscountry"/>
          <el-table-column v-if="columns.visible('work')" :show-overflow-tooltip="true" prop="work" label="工作单位" />
          <el-table-column v-if="columns.visible('sortid')" :show-overflow-tooltip="true" prop="csort.name" label="慢性病" width="130"/>
          <el-table-column v-if="columns.visible('j_areaid')" :show-overflow-tooltip="true" prop="j_area.county" label="所属行政区域" width="130"/>
          <el-table-column :formatter="dateFormat" v-if="columns.visible('starttime')" :show-overflow-tooltip="true" prop="starttime" label="慢性开始时间" width="120" align="center"/>
          <el-table-column :formatter="dateFormat" v-if="columns.visible('endtime')" :show-overflow-tooltip="true" prop="endtime" label="慢性结束时间" width="120" align="center"/>
          <el-table-column
            fixed="right"
            width="120"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="showEditView(scope.row)" style="padding: 3px" size="mini" type="primary">查看高级资料</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import crudHome from '@/api/vocation/home'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import moment from 'moment'

  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '按区域统计', url: 'api/home', crudMethod: { ...crudHome }})
  const defaultForm = { code: null, name: null, card: null, sex: null, nation: null, heath: null, culture: null, attr: null, isfarm: null, wedding: null,position: null, telephone: null, farmid: null, iscountry: null, work: null , sortid: null , j_areaid: null, starttime: null, endtime: null, file: null}
  export default {
    components: { Treeselect, crudOperation, rrOperation, udOperation, pagination },
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        nation_name: '',
        position_name: '',
        csort_name: '',
        j_area_name: '',
        inputJAreaName: '',
        popVisible: false,
        popVisible2: false,
        showAdvanceSearchView: false,
        isShowEditView: false,
        height: document.documentElement.clientHeight - 180 + 'px;',
        defaultProps: { children: 'children', label: 'label' },
        permission: {
          add: ['admin', 'home:add'],
          edit: ['admin', 'home:edit'],
          del: ['admin', 'home:del']
        },
      }
    },
    created() {
      this.$nextTick(() => {
        this.crud.toQuery()
        this.crud.msg.add = '新增成功'
      })
    },
    mounted: function() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + 'px;'
      }
    },
    methods: {
      [CRUD.HOOK.afterAddError](crud) {
        this.afterErrorMethod(crud)
      },
      [CRUD.HOOK.afterEditError](crud) {
        this.afterErrorMethod(crud)
      },
      afterErrorMethod(crud) {
      },
      deleteTag(value) {
      },
      // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        form.enabled = form.enabled.toString()
      },
      // 打开编辑弹窗前做的操作
      [CRUD.HOOK.beforeToEdit](crud, form) {
      },
      // 提交前做的操作
      [CRUD.HOOK.afterValidateCU](crud) {
      },
      checkboxT(row, rowIndex) {
        return row.id !== this.rowIndex
      },
      formatSex(row, column) {
        return row.sex === 1 ? '男' : '女'
      },
      formatHeath(row, column) {
        return row.heath === 0 ? '良好' : row.heath === 1 ? '健康' : '正常'
      },
      formatIsfarm(row, column) {
        return row.isfarm === 0 ? '否' : '是'
      },
      formatWedding(row, column) {
        return row.wedding === 0 ? '未婚' : '已婚'
      },
      formatIscountry(row, column) {
        return row.iscountry === 0 ? '否' : '是'
      },
      showEditView(data) {
        this.form = data;
        this.nation_name = data.nation.name
        this.position_name = data.position.name
        this.csort_name = data.csort.name
        this.j_area_name = data.j_area.county
        this.isShowEditView = true;
      },
      //日期格式化
      dateFormat:function(row,column){
        var date = row[column.property];
        if(date === undefined){return ''};
        return moment(date).format("YYYY-MM-DD")
      },
    }
  }
</script>

<style>
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
